<template>
  <div class="sdy-category">
    <SdyHeader title="啥都有 ~ 分类页" back>asdasd</SdyHeader>
    <div class="slide" ref="slide">
      <!-- 通过给 inner 元素定位的方式, 可以实现出界回弹效果 -->
      <div
        class="inner"
        ref="inner"
        :style="{ top: posY + 'px' }"
        @touchstart="startHandler"
        @touchmove="moveHandler"
        @touchend="endHandler">
        <van-sidebar v-model="index" @change="slideChangeHandler">
          <van-sidebar-item v-for="item in cateList" :title="item" />
        </van-sidebar>
      </div>
    </div>
    <div class="content">
      <div class="item" v-for="item in goodsList">
        <p class="title">{{ item.brand }}</p>
        <ul>
          <li v-for="t in item.list">
            <img :src="t.img1" alt="">
            <span>名称</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { categoryListApi, cateBrandListApi, categortBrandGoodsListApi } from '@/api/goods'
// 导入相关 ts 接口
import type { MyCateBrandGoodsItem } from '@/config/interface'

// 准备一个数据, 表示当前触发的导航
const index = ref<number>(0)

// 操作让侧边栏滑动 + 回弹
// 准备变量
const startY = ref<number>(0)
const moveY = ref<number>(0)
const startTop = ref<number>(0)
const posY = ref<number>(0)
// 拿到元素
const inner = ref<HTMLDivElement | null>(null)
const slide = ref<HTMLDivElement | null>(null)
// 鼠标按下的事件
const startHandler = (e: TouchEvent) => {
  // 记录光标初始位置
  startY.value = e.touches[0].clientY
  // 记录元素初始位置
  startTop.value = (inner.value as HTMLElement).offsetTop
}

// 鼠标移动的事件
const moveHandler = (e: TouchEvent) => {
  // 随时拿到坐标位置
  moveY.value = e.touches[0].clientY - startY.value
  // 随着移动, 实时操作posY 数值
  posY.value = moveY.value + startTop.value

  // 判断边界值
  if (posY.value >= 100) posY.value = 100
  if (
      posY.value <=
      -(inner.value as HTMLElement).offsetHeight -
      -(slide.value as HTMLElement).offsetHeight - 100
  ) posY.value =
  -(inner.value as HTMLElement).offsetHeight -
  -(slide.value as HTMLElement).offsetHeight - 100
}

// 鼠标移出的事件
const endHandler = () => {
  moveY.value = 0

  // 上方回弹
  if (posY.value >= 0) posY.value = 0

  // 下方回弹
  if (
      posY.value <=
      -(inner.value as HTMLElement).offsetHeight -
      -(slide.value as HTMLElement).offsetHeight
  ) posY.value =
  -(inner.value as HTMLElement).offsetHeight -
  -(slide.value as HTMLElement).offsetHeight
}


// 准备一个右侧内容渲染的数组
const goodsList = ref<MyCateBrandGoodsItem[]>([])

// 准备一个根据当前分类请求分类内所有相关数据的方法
const getGoodsList = async (cate: string) => {
  console.log(`我要根据 ${ cate } 去请求右边所有需要展示的数据`)

  // 1. 根据当前 cate 请求回来品牌列表
  const brandList = await cateBrandListApi(cate)

  // 2. 根据品牌列表内的所有内容, 去请求商品列表
  const list: Promise<any>[] = []
  brandList.data.forEach((item: { brand: string }) => {
    list.push(categortBrandGoodsListApi({ category: cate, brand: item.brand }))
  })
  const goods = await Promise.all(list)

  // 3. 组装数据
  const res: MyCateBrandGoodsItem[] = []
  brandList.data.forEach((item: { brand: string }, index: number) => {
    res.push({
      cate,
      brand: item.brand,
      list: goods[index].data
    })
  })
  goodsList.value = res
  console.log(res)
}


// 准备分类列表数组
const cateList = ref<string[]>([])
// slide 导航切换事件
const slideChangeHandler = async (index: number) => {

  // index 表示当前切换的索引
  // 只要从 cateList 中拿到对应的索引位置数据即可
  // 拿到当前分类
  const cate = cateList.value[index]
  getGoodsList(cate)
}

// 挂载完毕的钩子函数
onMounted(async () => {
  const res = await categoryListApi()
  cateList.value = res.data

  // 在渲染完毕以后
  getGoodsList(res.data[0])
})
</script>

<style scoped lang="scss">
.sdy-category {
  display: flex;
  height: 100%;

  > .slide {
    height: 100%;
    position: relative;
    width: 80px;
    overflow: hidden;

    > .inner {
      position: absolute;
      left: 0;
    }
  }

  > .content {
    flex: 1;
    overflow-y: auto;

    > .item {

      > .title {
        height: 30px;
        font-weight: 700;
      }

      > ul {
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        justify-content: space-evenly;

        > li {
          display: flex;
          flex-direction: column;
          align-items: center;

          > img {
            width: 50px;
            height: 50px;
            display: block;
          }
        }
      }
    }
  }
}
</style>
